/*
  学习目标：生命周期的更新阶段

+ 执行时机：1. setState()  2. 组件接收到新的props、 3. forceUpdate()  - 不常用
+ 说明：以上三者任意一种变化，组件就会重新渲染

**总结：**
1. 触发组件更新的方式（常用），两种：
   1. props值的改变
   2. setState()改变state
2. 更新阶段触发的钩子函数，有两个
   1. render
   2. componentDidUpdate

**注意：**

1. 不论DOM中有没有使用数据，钩子函数都会被触发。（与vue不同）
2. react中的更新，指的是数据更新，而非视图更新。（与vue不同）
*/
import React, { Component } from 'react';

export default class App extends Component {
    state = {
        title: 'Hello 666',
    };
    render() {
        const { title } = this.state;
        return (
            <h1>
                我是App
                <button onClick={() => this.setState({ title: '888' })}>父组件按钮</button>
                <Child title={title}></Child>
            </h1>
        );
    }
}

class Child extends React.Component {
    // 1. state改变会触发更新更新阶段的两个钩子函数
    // 2. props 的值改变会触发更新阶段的两个钩子函数
    state = {
        msg: '123',
    };

    render() {
        const { msg } = this.state;

        return (
            <div>
                我是子组件
                <hr />
                <button onClick={() => this.setState({ msg: msg + '~' })}>点我改变msg</button>
            </div>
        );
    }

    componentDidUpdate() {
        const { msg } = this.state;
        // console.log('componentDidUpdate被执行');
        console.log('msg  ----->  ', msg);
    }
}